<template>
    <div class="container">
        <div class="select-wrapper">
            <span class="select-item all" @click="select(0)" :class="{'active':selectIndex === 0}">{{title.all}}<span class="description">1</span></span>
            <span class="select-item positive" @click="select(1)" :class="{'active':selectIndex === 1}">{{title.positive}}<span class="description">1</span></span>
            <span class="select-item negative" @click="select(2)" :class="{'active':selectIndex === 2}">{{title.negative}}<span class="description">1</span></span>
        </div>
        <div class="filter-wrapper" @click="toggleShowOnlyContent">
            <i class="ico-check_circle" :class="{'active':showOnlyContent===true}"></i>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'SelectFilter',
  props: {
    title: {
      type: Object,
      default () {
        return {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      }
    },
    descriptions: {
      type: Array,
      default () {
        return []
      }
    },
    showOnlyContent: {
      type: Boolean,
      default: true
    },
    selectType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      selectIndex: this.selectType
    }
  },
  methods: {
    select (index) {
      this.selectIndex = index
      this.$dispatch('select.change', index)
    },
    toggleShowOnlyContent () {
      this.showOnlyContent = !this.showOnlyContent
      this.$dispatch('showOnlyContent.change', this.showOnlyContent)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .container
      .select-wrapper
        margin-top :18px
        padding-bottom 18px
        margin-left :18px
        border-bottom :1px rgba(7,17,27,0.1) solid
        .select-item
          display :inline-block
          padding :8px 12px
          margin-right :8px
          color:#fff
          .description
            display :inline-block
            font-size :8px
            margin-left :2px
        .all
          background:rgba(0,160,220,0.2)
          &.active
              background:rgb(0,160,220)
        .positive
          background:rgba(0,160,220,0.2)
          &.active
            background:rgb(0,160,220)
        .negative
          background:rgba(77,85,93,0.2)
          &.active
            background:rgb(77,85,93)
      .filter-wrapper
        padding:12px 0 12px 18px
        font-size :0px
        line-height :24px
        color:rgb(147,153,159)
        border-bottom :1px rgba(7,17,27,0.1) solid
        .ico-check_circle
          display :inline-block
          font-size :24px
          line-height :24px
          color:rgb(147,153,159)
          vertical-align :center
          &.active
            color:rgb(0,160,220)
        .text
          display :inline-block
          text-align :center
          font-size :12px
          line-height :24px
</style>
